<template>
  <BasicModal
    v-bind="$attrs"
    :title="t('routes.demo.FigureDocSettings.figureDocTemplate')"
    @register="register"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :destroyOnClose="true"
    :minHeight="300"
    :width="800"
  >
    <template #insertFooter>
      <Upload :customRequest="customUpload" :beforeUpload="beforeUpload">
        <a-button type="primary" preIcon="ion:cloud-upload-outline">{{
          t('common.upload')
        }}</a-button>
      </Upload>
      <Divider type="vertical" />
      <a-button preIcon="ion:download-outline" type="primary" @click="download">{{
        t('common.download')
      }}</a-button>
      <Divider type="vertical" />
      <a-button color="error" preIcon="ion:trash-outline" @click="handleDelete">{{
        t('common.delete')
      }}</a-button>
    </template>
    <Row>
      <Col span="24">
        <iframe
          v-show="iframeLoading"
          ref="ifameName"
          :src="previewSrc"
          frameborder="10"
          style="width: 95%; height: 300px"
          :onload="onload"
        ></iframe>
        <Empty v-show="!iframeLoading" :description="description" />
      </Col>
    </Row>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Row, Col, Divider, Upload, Empty } from 'ant-design-vue';
  import { Base64 } from 'js-base64';

  import {
    downloadDocTypeTemplate,
    deleteDocTypeData,
    addDocTypeDataList,
    GetDocFileTemplateUrl,
  } from '/@/api/demo/system';

  const { t } = useI18n();
  const { createMessage } = useMessage();

  const DocTypeId = ref('');
  // 预览连接地址
  const previewSrc = ref('');
  const ifameName = ref(null);
  const iframeLoading = ref(false);
  const description = ref(t('routes.demo.FigureDocSettings.noData'));

  const onload = () => {
    const iframe = ifameName.value;
    if (iframe !== null) {
      if (iframe && iframe.contentWindow) {
        iframeLoading.value = true;
      } else {
        iframe.addEventListener('load', () => {
          iframeLoading.value = true;
        });
      }
    }
  };

  // 提交
  const handleSubmit = async () => {
    handleCancel();
  };

  const handleCancel = () => {
    DocTypeId.value = '';
    previewSrc.value = '';
    iframeLoading.value = false;
    description.value = t('routes.demo.FigureDocSettings.noData');
    closeModal();
  };

  // 下载
  const download = () => {
    downloadDocTypeTemplate(DocTypeId.value).then((res) => {
      if (res) {
        createMessage.success(t('common.downLoadSuccess'));
      }
    });
  };

  // 删除
  const handleDelete = () => {
    deleteDocTypeData(DocTypeId.value).then((res) => {
      if (res) {
        previewSrc.value = '';
        iframeLoading.value = false;
        createMessage.success(t('common.delSuccessText'));
      }
    });
  };

  // 文件上传
  const customUpload = (e: any) => {
    const formData = new FormData();
    formData.append('file', e.file);
    addDocTypeDataList(DocTypeId.value, formData).then((res) => {
      if (res) {
        handlePreview();
        createMessage.success(t('common.uploadSuccess'));
      }
    });
  };

  const handlePreview = async () => {
    const res = await GetDocFileTemplateUrl(DocTypeId.value);
    if (res) {
      let url = res[1] + ':8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(res[0]));
      previewSrc.value = url;
      description.value = t('routes.demo.FigureDocSettings.loading');
    }
  };

  // 文件上传前
  const beforeUpload = (file: any) => {
    // 只允许上传doc,docx,xls,xlsx文件类型
    const fileType = [
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    ].includes(file.type);
    if (!fileType) {
      createMessage.error(t('routes.demo.FigureDocSettings.uploadFileTypeError'));
    }
    return fileType;
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    DocTypeId.value = data.id;
    handlePreview();
  });
</script>

<style lang="less" scoped>
  ::v-deep(.ant-upload-list) {
    display: none !important;
  }
</style>
